<template>
	<div class="addAgentBox">
		<el-tabs v-model="activeName" type="card">
			<el-tab-pane
				v-if="hasPermission('90930063')"
				key="totalAgent"
				:label="'单个设置总代分红比例'"
				name="totalAgent"
			>
				<SingleSetting :agentLevel="agentLevel"></SingleSetting>
			</el-tab-pane>
			<el-tab-pane
				v-if="hasPermission('90930064')"
				key="nonTotalAgent"
				:label="'批量设置总代分红比例'"
				name="nonTotalAgent"
			>
				<BatchSettings :agentLevel="agentLevel"></BatchSettings>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
export default {
	name: routerNames.addAgent,
	components: {
		SingleSetting: () => import('./components/singleSetting'),
		BatchSettings: () => import('./components/batchSettings')
	},
	mixins: [list],
	data() {
		return {
			agentLevel: [],
			activeName: this.hasPermission('201031')
				? 'totalAgent'
				: 'nonTotalAgent'
		}
	},
	created() {
		this.getProxyLevelNameList()
	},
	methods: {
		getProxyLevelNameList() {
			this.agentLevel = []
			this.$api.getProxylevelnameList().then((res) => {
				if (res?.code === 200) {
					this.agentLevel = Array.isArray(res.data) ? res.data : []
				} else {
					this.agentLevel = []
				}
			})
		}
	}
}
</script>
<style lang="scss">
.addAgentFormTop {
	padding: 0 20px;
	line-height: 48px;
	background: #f5f5f5;
	display: flex;
	font-size: 14px;
	justify-content: space-between;
	.textB {
		color: #909399;
		font-weight: 700;
	}
	.textColor {
		color: #ff0000;
	}
}
</style>
<style lang="scss" scoped>
.addAgentBox {
	width: 100%;
	padding-top: 50px;
	background: #f5f5f5;
	min-height: calc(100vh - 105px);
}
.el-tabs {
	width: 90%;
	margin: 0 auto;
	::v-deep .el-tabs__nav {
		border: none;
	}
	::v-deep .el-tabs__item {
		margin-right: 20px;
		background: #ffffff;
		border: 1px solid #e4e7ed !important;
	}
	// ::v-deep .is-active {
	// 	color: #000;
	// 	background: #00bfbf;
	// 	border-bottom: 1px solid #e4e7ed !important;
	// }
}
</style>
